<script setup lang="ts">
const props = defineProps({
  id: {
    type: String,
    required: true
  },
  active: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['set-active', 'delete-item'])

const onItemClick = (e: MouseEvent, id: string) => {
  emits('set-active', id)
  e.stopPropagation()
}
const deleteItem = (id: string) => {
  emits('delete-item', id)
}
</script>

<template>
  <a-dropdown :trigger="['contextmenu']">
    <template #overlay>
      <a-menu>
        <a-menu-item key="1" @click="deleteItem(id)">
          <a-flex justify="space-between" class="menu-item">
            <span>删除图层</span>
            <span class="short-key">Backspace&nbsp;/&nbsp;Delete</span>
          </a-flex>
        </a-menu-item>
      </a-menu>
    </template>
    <div
      class="edit-wrapper"
      @keyup.delete="deleteItem(id)"
      @click.capture="onItemClick($event, id)"
      :class="{ active: active }"
      tabindex="0"
    >
      <slot></slot>
    </div>
  </a-dropdown>
</template>

<style scoped lang="scss">
.menu-item {
  .short-key {
    color: #ccc;
    padding-left: 8px;
  }
}
.edit-wrapper {
  padding: 0;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  &:hover {
    border: 1px dashed #ccc;
  }
  &.active {
    border: 1px solid #1890ff;
    z-index: 1500;
  }
  &:focus-visible {
    outline: none;
  }
}
</style>
